<template>
  <div>
    <h1 style="font-size:18px;">Radio 单选框</h1>
    <p>在一组备选项中进行单选</p>
    <h2 style="font-size:14px;">基础用法</h2>
    <div class="testRadio">
      <Radio v-model="single">单选框</Radio>
      <span>{{this.single}}</span>
    </div>
    <p>通过点击 <code>Radio</code> 组件来改变选中状态，组件内部使用 <code>v-model</code> 绑定。<code>v-model</code> 值为 <code>true</code> 时，为选中状态。值为 <code>false</code> 时，为未选中状态。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Radio v-model=&quot;single&quot;&gt;单选框&lt;/Radio&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            single: false
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">禁用状态</h2>
    <div class="testRadio">
      <Radio v-model="checked1" disabled>单选框1</Radio>
      <Radio v-model="checked2" disabled>单选框2</Radio>
    </div>
    <p>通过在 <code>Checkbox</code> 组件上设置 <code>disabled</code> 属性即可。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Radio v-model=&quot;checked1&quot; disabled&gt;单选框1&lt;/Radio&gt;
        &lt;Radio v-model=&quot;checked2&quot; disabled&gt;单选框2&lt;/Radio&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            checked1: false,
            checked2: true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">单选框组</h2>
    <div class="testRadio">
      <RadioGroup v-model="animal">
          <Radio label="金斑蝶"></Radio>
          <Radio label="爪哇犀牛"></Radio>
          <Radio label="印度黑羚"></Radio>
          <span>animal：{{this.animal}}</span>
      </RadioGroup>
    </div>
    <p>结合 <code>RadioGroup</code> 元素和子元素 <code>Radio</code> 可以实现单选组，在 <code>RadioGroup</code> 中绑定 <code>v-model</code> ，在 <code>Radio</code> 中设置好 <code>label</code> 即可，无需再给每一个 <code>Radio</code> 绑定变量。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;RadioGroup v-model=&quot;animal&quot;&gt;
            &lt;Radio label=&quot;金斑蝶&quot;&gt;&lt;/Radio&gt;
            &lt;Radio label=&quot;爪哇犀牛&quot;&gt;&lt;/Radio&gt;
            &lt;Radio label=&quot;印度黑羚&quot;&gt;&lt;/Radio&gt;
        &lt;/RadioGroup&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            animal: '爪哇犀牛'
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">按钮样式</h2>
    <div class="testRadio">
      <RadioGroup v-model="animal1" type="button">
        <Radio label="金斑蝶"></Radio>
        <Radio label="爪哇犀牛"></Radio>
        <Radio label="印度黑羚"></Radio>
      </RadioGroup>
      <span style="margin-left:20px;">animal：{{this.animal1}}</span>
    </div>
    <p>组合使用时可以设置属性 <code>type</code> 为 <code>button</code> 来应用按钮的样式。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;RadioGroup v-model=&quot;animal&quot; type=&quot;button&quot;&gt;
          &lt;Radio label=&quot;金斑蝶&quot;&gt;&lt;/Radio&gt;
          &lt;Radio label=&quot;爪哇犀牛&quot;&gt;&lt;/Radio&gt;
          &lt;Radio label=&quot;印度黑羚&quot;&gt;&lt;/Radio&gt;
        &lt;/RadioGroup&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            animal: '爪哇犀牛'
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">API</h2>
    <p>Radio props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>RadioGroup props</p>
    <Table :columns="tableColumn" :data="tableData1"></Table>
    <br>
    <p>Radio events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
    <br>
    <p>RadioGroup events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
  </div>
</template>

<script>
export default {
  name: 'test-radio',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          width: 420,
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type',
          tooltip: true
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData: [
        {
          attribute: 'v-model',
          explain: '是否选中',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用',
          type: 'Boolen',
          default: 'false'
        },
        {
          attribute: 'trueValue',
          explain: '选中值',
          type: 'String | Number | Boolen',
          default: 'true'
        },
        {
          attribute: 'falseValue',
          explain: '未选中值',
          type: 'String | Number | Boolen',
          default: 'false'
        },
        {
          attribute: 'label',
          explain: '使用RadioGroup时有效，类似form表单label',
          type: 'String | Number | Boolen',
          default: '-'
        }
      ],
      tableData1: [
        {
          attribute: 'v-model',
          explain: '指定选中项目的集合',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'type',
          explain: '可选值为 button 或不填，为 button 时使用按钮样式',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'size',
          explain: '尺寸，只对按钮样式生效，可选值为large和small或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'vertical',
          explain: '是否垂直排列，按钮样式下无效',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableData2: [
        {
          event: 'on-change',
          type: '在选项状态发生改变时触发，返回当前选中的项。通过修改外部的数据改变时不会触发',
          callback: '...'
        }
      ],
      checked1: false,
      checked2: true,
      single: false,
      animal: '爪哇犀牛',
      animal1: '爪哇犀牛'
    }
  }
}
</script>

<style scoped lang="less">
.testRadio {
  width: 500px;
  height: 50px;
  display:flex;
  align-items: center;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
p {
  padding: 10px 0;
}
</style>
